<template>
    <div class="head">
        <div>
            <i class="iconfont icon-yonghu"></i></div>
            <p v-if='this.$store.state.flag'>
                 <a @click='login' href='#'>登录</a>
                <a href='#'>/</a>
                <a  @click='regsiter' href='#'>注册</a>
            </p>
            <p class="p2" v-else>
            欢迎用户<span class='span2'>{{this.$store.state.username}}</span>登录！
            </p>
           

        
    </div>
</template>

<script>
export default {
    data(){
        return{
           
             name:'',
        }
       
    },
    created(){
        console.log(this.$store.state.username)
    },
   
    methods:{
        login(){
            this.$router.push({name:'login'})
        },
        regsiter(){
            this.$router.push({name:'regsiter'})
        }
        
    }
}
</script>

<style lang='scss' scoped>
 
 $appwidth:375;


@function pxtovw($p){
    @return (100/$appwidth*$p) * 1vw;
}

.head{
    width:100%;
    height: pxtovw(80);
    background-color: #F37D0F;
    position: absolute;
    div{
        width: pxtovw(50);
        height: pxtovw(50);
        background-color: #F8B16F;
        border-radius: 50%;
        text-align: center;
        line-height: pxtovw(50);
        position: absolute;
        top:pxtovw(15);
        left:pxtovw(20);
        .icon-yonghu{
            background-color: #FFB500;
            color: white;
            font-size:pxtovw(42);
             border-radius: 50%;

        }
    }
    p{
        position: absolute;
        top:pxtovw(30);
        left:pxtovw(72);
        
        a{
            text-decoration: none;
        font-size: pxtovw(14);

            color: white;
        }
    }
    .p2{
        color: white;
        span{
            color: red;
        }
    }
}

</style>
